<template>
  <div>
    <el-dialog
      :visible="addDialog"
      width="50%"
      :before-close="closeDialog"
      top="5vh"
      :close-on-click-modal="false"
    >
      <div class="dialogTitle" slot="title">整改</div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="整改负责人:">
          {{ form.changeResponerName }}
        </el-form-item>
        <el-form-item label="整改完成时间:">
          <el-date-picker
            v-model="form.changeResponerTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input
            v-model="form.changeResponerPhone"
            autocomplete="off"
            placeholder="请输入 "
          />
        </el-form-item>
        <el-form-item label="关联图片:">
          <el-upload
            action=""
            :http-request="UploadImage3"
            :file-list.sync="fileList"
            :limit="3"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :on-exceed="handleExceed"
            :on-change="handleFileChange"
          >
            <i v-if="fileList.length < 3" slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="验收负责人:">
          <el-select
            v-model="form.checkResponerId"
            placeholder="请选择验收负责人"
          >
            <el-option
              v-for="item in columns4"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="addBtn" type="primary" @click="submit"
          >整改</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
// import Format from "@/utils/uploadImages";
import { dictionaryListApi, listApi, uploadApi } from "@/api/login";
import {
  changeHiddenDangerApi,
  getToDoListApi,
} from "@/api/problemPage/problemRegister";

export default {
  name: "addProblem",
  props: {
    addDialog: {
      type: Boolean,
      default: false,
    },
    dialogId: {
      type: String,
      default: null,
    },
  },
  components: {},
  data() {
    return {
      form: {
        dangerName: "",
        dangerDescribe: "",
        dangerGrade: "",
        dangerSource: "",
        dangerKind: "",
        governKind: "",
        changeResponerId: "",
        solveTime: "",
      },
      continentOptions: [],
      fileList: [],
      columns1: [],
      columns2: [],
      columns3: [],
      columns4: [],
      options6: [],
      uploaderSubmit: [],
    };
  },
  created() {
    this.dictionaryList();
  },
  methods: {
    async submit() {
      if (
        !this.form.changeResponerTime ||
        !this.form.changeResponerPhone ||
        !this.form.checkResponerId
      ) {
        this.$message.warning("请完整填写整改信息");
        return;
      }
      const res = await changeHiddenDangerApi({
        id: this.form.id,
        changeResponerId: this.form.changeResponerId,
        changeResponerTime: this.changeTime,
        changeResponerPhone: this.form.changeResponerPhone,

        changeResponerImg1: this.uploaderSubmit[0]
          ? this.uploaderSubmit[0].url
          : "",
        changeResponerImg2: this.uploaderSubmit[1]
          ? this.uploaderSubmit[1].url
          : "",
        changeResponerImg3: this.uploaderSubmit[2]
          ? this.uploaderSubmit[2].url
          : "",
        changeStatus: 2,
        checkResponerId: this.form.solveRespondentValue,
        checkResponerStatus: 1,
      });
      if (res.code == 0) {
        this.$message.success("整改成功");
        this.closeDialog();
        this.$parent.getList();
      } else {
        this.$message.error("整改失败");
      }
    },
    closeDialog() {
      this.$emit("update:addDialog", false); // 触发父组件更新
    },
    async dictionaryList() {
      const res = await dictionaryListApi({
        type: "danger_grade",
      });
      this.columns3 = res.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
      const res2 = await dictionaryListApi({
        type: "danger_source",
      });
      this.columns1 = res2.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
      const res3 = await dictionaryListApi({
        type: "danger_kind",
      });
      this.columns2 = res3.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
      const res5 = await listApi();
      this.columns4 = res5.data.map((item) => {
        return {
          text: item.name,
          value: item.id,
        };
      });
      // console.log(res5);
      const res4 = await dictionaryListApi({
        type: "govern_kind",
      });
      this.options6 = res4.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
    },
    handleBeforeUpload(file) {
      const suffix =
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!suffix) {
        Message.error("只能上传图片！");
      }
      if (!isLt1M) {
        Message.error("上传图片大小不能超过1MB!");
      }
    },
    handleExceed() {
      this.$message.warning("最多上传 3 个文件");
    },
    async UploadImage3(file) {
      this.openLoading();
      const formData = new FormData();
      formData.append("file", file.file);

      const res = await uploadApi(formData);
      if (res.code === 0) {
        this.uploaderSubmit.push({
          url: res.data,
          name: file.file.name,
          uid: file.file.uid,
        });
      } else {
        this.fileList.pop();
      }
      this.openLoading().close();
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList; // 手动同步
    },
    async getToDoList(id) {
      const res = await getToDoListApi({
        id,
      });
      this.form = res.data;
      const keysToExtract = [
        "changeResponerImg1",
        "changeResponerImg2",
        "changeResponerImg3",
      ];
      // 动态提取所有以特定前缀开头的键值对

      this.fileList = keysToExtract
        .filter(
          (key) =>
            res.data[key] !== null &&
            res.data[key] !== "" &&
            res.data[key] !== undefined
        )
        .map((key) => {
          return {
            url: res.data[key],
            name: key,
            uid: key,
          };
        });
    },
    handleRemove(e) {
      this.uploaderSubmit = this.uploaderSubmit.filter((item) => {
        return item.uid !== e.uid;
      });
      this.fileList = this.fileList.filter((item) => {
        return item.uid !== e.uid;
      });
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.dialogTitle {
  position: relative;
  padding-left: 10px; /* 调整文本与颜色条之间的间距 */
  font-weight: bold;
}
.dialogTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 2px;
  transform: translateY(-50%);
  width: 4px; /* 颜色条的宽度 */
  height: 14px; /* 颜色条的高度 */
  background-color: #249451; /* 颜色条的颜色 */
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog__body {
  padding-right: 50px !important;
}
::v-deep .dialog-footer {
  text-align: center;
  .addBtn {
    background: #249451;
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: #fff;
  }
}
</style>
